<template>
  <div class="sales-detail">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>销售详情</span>
          <el-button @click="$router.back()">返回</el-button>
        </div>
      </template>

      <el-descriptions :column="2" border>
        <el-descriptions-item label="销售姓名">{{ detail.name }}</el-descriptions-item>
        <el-descriptions-item label="所属小组">{{ detail.group }}</el-descriptions-item>
        <el-descriptions-item label="组长">{{ detail.leader }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="detail.status === '在职' ? 'success' : 'info'">
            {{ detail.status }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="总线索量">{{ detail.leads }}</el-descriptions-item>
        <el-descriptions-item label="到店量">{{ detail.visit }}</el-descriptions-item>
        <el-descriptions-item label="成交量">{{ detail.deal }}</el-descriptions-item>
        <el-descriptions-item label="成交率">{{ detail.rate }}</el-descriptions-item>
      </el-descriptions>

      <div class="performance-chart">
        <h3>业绩趋势</h3>
        <div ref="chartRef" style="height: 300px"></div>
      </div>

      <div class="leads-table">
        <h3>最近线索</h3>
        <el-table :data="leadsList" style="width: 100%">
          <el-table-column prop="source" label="来源" width="100" />
          <el-table-column prop="phone" label="电话" width="120" />
          <el-table-column prop="wechat" label="微信" width="120" />
          <el-table-column prop="type" label="咨询类型" width="100" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusType(row.status)">
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180" />
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import * as echarts from 'echarts'

const route = useRoute()
const chartRef = ref(null)

const detail = ref({
  name: '张三',
  group: 'A组',
  leader: '李四',
  status: '在职',
  leads: 156,
  visit: 45,
  deal: 12,
  rate: '26.7%'
})

const leadsList = ref([
  {
    source: '抖音',
    phone: '138****1234',
    wechat: 'wx123456',
    type: '租车',
    status: '已到店',
    createTime: '2024-03-20 14:30'
  },
  {
    source: '视频号',
    phone: '139****5678',
    wechat: 'wx234567',
    type: '买车',
    status: '已成交',
    createTime: '2024-03-20 15:20'
  }
])

const getStatusType = (status) => {
  const statusMap = {
    '待跟进': 'info',
    '已联系': 'warning',
    '已到店': 'primary',
    '已成交': 'success',
    '已流失': 'danger'
  }
  return statusMap[status] || 'info'
}

onMounted(() => {
  // 初始化业绩趋势图表
  const chart = echarts.init(chartRef.value)
  chart.setOption({
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['线索量', '到店量', '成交量']
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '线索量',
        type: 'line',
        data: [120, 132, 101, 134, 90, 230]
      },
      {
        name: '到店量',
        type: 'line',
        data: [45, 52, 38, 42, 35, 78]
      },
      {
        name: '成交量',
        type: 'line',
        data: [12, 15, 10, 11, 9, 20]
      }
    ]
  })
})
</script>

<style scoped>
.sales-detail {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.performance-chart,
.leads-table {
  margin-top: 30px;
}

h3 {
  margin-bottom: 20px;
  color: #303133;
}
</style> 